import React, { Component } from 'react';
import { connect } from 'dva';
import { Row, Col } from 'antd';
import { Pie, DoublePie, SinglePie, WaterWave, Gauge } from '@/components/Charts';
import { percentBlue, percentGreen, percentBlueDark, percentGreenDark } from '@/common/chartParam';
import styles from './index.less';

@connect(({ commonModel }) => ({ commonModel }))
class PieDemo extends Component {
  componentDidMount() {
    this.fetch();
  }

  fetch = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'commonModel/query',
      targetKey: 'pieData',
      payload: {},
    });
  };

  render() {
    const {
      commonModel: { pieData: { simplePieData, doublePieData, solidPieData, percent } = {} },
    } = this.props;
    return (
      <Row className={styles.chartRow}>
        <Col span={6}>
          <div className={styles.chartPiePanel}>
            <Pie height={180} percent={Number(percent || 0)} totalFontSize={36} title="图表标题" />
          </div>
        </Col>
        <Col span={12}>
          <div className={styles.chartPiePanel}>
            <Pie
              height={220}
              data={simplePieData}
              showTooltipValue
              total={6215.36}
              unit="万元"
              showLegend
              pieColSpan={10}
            />
          </div>
        </Col>
        <Col span={6}>
          <div className={styles.chartPiePanel}>
            {doublePieData && doublePieData.length > 0 && (
              <DoublePie
                height={180}
                // percent={[Number(78.88 || 0),Number(48.88 || 0)]}
                dataOut={[doublePieData[0]]}
                dataIn={[doublePieData[1]]}
                // dataMax={150}
                colorOut={percentBlue}
                colorIn={percentGreen}
                title="图表标题"
              />
            )}
          </div>
        </Col>
        <Col span={6}>
          <div className={styles.chartPiePanel}>
            <SinglePie height={180} data={233} unit="人" />
          </div>
        </Col>
        <Col span={6}>
          <div className={styles.chartPiePanel}>
            <Pie height={180} inner={0} data={solidPieData} showLegend showLabel unit="人" />
          </div>
        </Col>
        <Col span={6}>
          <div className={styles.chartPieDarkPanel}>
            <Pie
              height={180}
              percent={Number(percent || 0)}
              color={percentBlueDark}
              totalFontSize={36}
              title="图表标题"
              theme="dark"
            />
          </div>
        </Col>
        <Col span={6}>
          <div className={styles.chartPieDarkPanel}>
            <Pie
              height={220}
              data={simplePieData}
              showTooltipValue
              total={6215.36}
              unit="万元"
              theme="dark"
            />
          </div>
        </Col>
        <Col span={6}>
          <div className={styles.chartPieDarkPanel}>
            {doublePieData && doublePieData.length > 0 && (
              <DoublePie
                height={180}
                // percent={[Number(78.88 || 0),Number(48.88 || 0)]}
                dataOut={[doublePieData[0]]}
                dataIn={[doublePieData[1]]}
                // dataMax={150}
                colorOut={percentBlueDark}
                colorIn={percentGreenDark}
                title="图表标题"
                theme="dark"
              />
            )}
          </div>
        </Col>
        <Col span={6}>
          <div className={styles.chartPieDarkPanel}>
            <Pie
              height={180}
              inner={0}
              data={solidPieData}
              showLegend
              showLabel
              unit="人"
              theme="dark"
            />
          </div>
        </Col>
        <Col span={6}>
          <div className={styles.chartPiePanel}>
            <WaterWave height={180} percent={percent} title="图表标题" />
          </div>
        </Col>
        <Col span={6}>
          <div className={styles.chartPieDarkPanel}>
            <WaterWave height={180} percent={percent} title="图表标题" theme="dark" />
          </div>
        </Col>
        <Col span={6}>
          <div className={styles.chartPiePanel}>
            <Gauge height={180} percent={percent} title="图表标题" />
          </div>
        </Col>
        <Col span={6}>
          <div className={styles.chartPieDarkPanel}>
            <Gauge
              height={180}
              data={3.14}
              formatter={value => `${value} : 1`}
              title="图表标题"
              theme="dark"
            />
          </div>
        </Col>
      </Row>
    );
  }
}

export default PieDemo;
